<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>管理员主界面</title>
		
		<!--页面样式-->
		<style>
	
		iframe{
			width: 100%;
			height: 100%;
		}
		
		</style>
	</head>

	<!--引入相关的文件-->
	<script src="../js/vue.js"></script>
	<script src="../element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
	<script src="../js/axios-0.18.0.js"></script>

	<body>
		
		<!--html主体部分-->
		<div id="app">
			<el-container style="height: 850px; border: 1px solid #eee">
				<el-header  style="background-color:rgb(238, 241, 246) ; text-align: left; font-size: 36px; line-height: 90px; height: 100px;">
					<img src="../image/log.png" style="width: 100px; float: left;" /> 
					24°超市后台管理 
					<span style="float: right;font-size: 16px;">
						<el-avatar> manager </el-avatar> 王七
					</span> 
				</el-header>
				<el-container>
					<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
						<el-menu :default-openeds="['2','3']">
							<el-menu-item index="1" @click="changePages(1)"><i class="el-icon-coin"></i>收银</el-menu-item>
							<el-submenu index="2">
							<template slot="title"><i class="el-icon-goods"></i>商品管理</template>
								<el-menu-item index="2-1" @click="changePages(2)">厂商，供应商信息管理</el-menu-item>
								<el-menu-item index="2-2" @click="changePages(3)">商品入库管理</el-menu-item>
								<el-menu-item index="2-3" @click="changePages(4)">商品信息管理</el-menu-item>
							</el-submenu>
							<el-submenu index="3">
							<template slot="title"><i class="el-icon-document-copy"></i>订单管理</template>
								<el-menu-item index="3-1" @click="changePages(5)">订单管理</el-menu-item>
								<el-menu-item index="3-2" @click="changePages(6)">线上订单发货</el-menu-item>
							</el-submenu>
							<el-menu-item index="4" @click="changePages(7)"><i class="el-icon-user"></i>个人信息</el-menu-item>
							<el-menu-item index="5" @click="changePages(8)"><i class="el-icon-user"></i>报表统计</el-menu-item>
						</el-menu>
					</el-aside>
					<el-main> <iframe :src="mainsrc"></iframe> </el-main>
				</el-container>
			</el-container>
		</div>
		
		<!--要使用vue的js代码-->
		<script>
			new Vue({
				el: '#app',
				data:{
					mainsrc:'getCash.html'
				},
				methods: {
					changePages:function(i){
						if(i == 1){
							this.mainsrc = "getCash.html"
						} else if(i == 2){
							this.mainsrc = "supplierInfo.html"
						} else if(i == 3){
							this.mainsrc = "goodsInGodown.html"
						} else if(i == 4){
							this.mainsrc = "addGoods.html"
						} else if(i == 5){
							this.mainsrc = "orderInfo.html"
						} else if(i == 6){
							this.mainsrc = "sendGoods.html"
						} else if(i == 7){
							this.mainsrc = "managerInfo.html"
						} else if(i == 8){
							this.mainsrc = "Report.html"
						}
					}
				},
				mounted(){

				}
			});
		</script>
		
		<!--不要使用vue的js代码-->
		<script>
		
		</script>
		
	</body>
</html>